import React from "react";
import {
    Modal,
    NativeModules,
    ScrollView,
    StatusBar,
    Text,
    TouchableOpacity,
    TouchableWithoutFeedback,
    View
} from "react-native";
import FormStyle from "../style/form-style";

export default class FormDropDownListWidget extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            items: this.props.options,
            modalVisible: false,
        };
    }

    render() {
        return (
            <View style={[FormStyle.row, this.props.style]}>
                <Text style={FormStyle.rowLeft}>
                    {this.props.name}
                </Text>
                <TouchableOpacity style={[FormStyle.rowRight, {borderRadius: 2, backgroundColor: "#eee",marginLeft:5}]}
                                  onPress={(e) => this.showModal(e)}>
                    <Text style={[FormStyle.text,{color:'#000000',fontSize:15}]}>{this.props.value}</Text>
                </TouchableOpacity>

                <Modal animationType='fade'
                       transparent={true}
                       visible={this.state.modalVisible}
                       onRequestClose={() => this.setState({modalVisible: false})}
                       hardwareAccelerated={true}
                       presentationStyle="overFullScreen">
                    <TouchableOpacity activeOpacity={1} style={_style.modal} onPress={
                        () => this.setState({modalVisible: false})
                    }>
                        <View>
                            <ScrollView style={[_style.scroll, {
                                left: this.state.left,
                                top: this.state.top,
                                width: this.state.width
                            }]}>
                                <View>
                                    {
                                        this.state.items ?
                                            this.state.items.map((item) => {
                                                return this.createItemView(this.state.items, item)
                                            })
                                            : null
                                    }
                                </View>
                            </ScrollView>
                        </View>
                    </TouchableOpacity>
                </Modal>

            </View>
        )
    }

    showModal(e) {
        console.log('learn','show modal');
        NativeModules.UIManager.measure(e.currentTarget, (x, y, width, height, pageX, pageY) => {
            console.log("location", x, y, width, height, pageX, pageY);
            this.setState({
                modalVisible: true,
                left: pageX,
                top: pageY + height - StatusBar.currentHeight,
                width: width,
            })
        });
    }

    //创建视图
    createItemView(items, item) {
        console.log('createItem', item.name);
        const subItems = item.subItems;
        if (subItems) {  //group
            return (
                <View key={item.id}>
                    <TouchableOpacity style={_style.group} onPress={
                        () => {
                            items.map((temp) => {
                                temp.expand = temp.id === item.id ? !item.expand : false;
                            });
                            this.setState({items: this.state.items})
                        }
                    }>
                        <Text style={{color: "black"}}>{item.name}</Text>
                    </TouchableOpacity>
                    {
                        item.expand ?
                            (
                                <View style={{paddingLeft: 10}}>
                                    {
                                        item.subItems.map((item) => {
                                            return this.createItemView(subItems, item)
                                        })
                                    }
                                </View>
                            )
                            : (<View/>)
                    }
                </View>
            )
        } else {  //item
            return (
                <TouchableOpacity key={item.id} style={{padding: 5}} onPress={
                    () => {
                        this.onSelected(null, "", "", item)
                    }
                }>
                    <Text>{item.name}</Text>
                </TouchableOpacity>
            )
        }
    }

    //选择回调
    onSelected(items, ids, text, selectedItem) {
        if (items) {
            for (let i = 0; i < items.length; i++) {
                let item = items[i];
                if (item.id === selectedItem.id) {
                    let t_ids = ids, t_text = text;
                    if (t_text) {
                        t_text += " - ";
                        t_ids += ",";
                    }
                    t_text += item.name;
                    t_ids += item.id;
                    if (this.props.onSelected) {
                        this.props.onSelected(t_ids, t_text);
                        this.setState({
                            modalVisible: false,
                        })
                    }
                    return;
                }
                if (item.subItems) {
                    if (!item.expand) {
                        continue;
                    }
                    let t_ids = ids, t_text = text;
                    if (t_text) {
                        t_text += " - ";
                        t_ids += ",";
                    }
                    t_text += item.name;
                    t_ids += item.id;
                    this.onSelected(item.subItems, t_ids, t_text, selectedItem)
                }
            }
        } else {
            this.onSelected(this.state.items, '', '', selectedItem);
        }
    }
}

const _style = {
    modal: {
        // borderWidth: 1,
        borderColor: 'red',
        width: '100%',
        height: '100%',
        flex: 1,
        // position: 'absolute',
    },
    scroll: {
        backgroundColor: 'white',
        elevation: 5,
        minHeight: 50,
        maxHeight: 200,
        // height: 'auto',
        // maxHeight: 250
    },
    group: {
        padding: 5,
        zIndex: 100,
    },
    item: {}
};
